<template>
  <div class="main-layout">
    <div class="close">
      <div></div>
      <div @click="$emit('close')"><img src="@/assets/close.png" alt="" /></div>
    </div>

    <div class="content-container">
      <!-- 顶部并排的两个组件 -->
      <div class="top-row">
        <RoomComfort :title="title" class="room-comfort" />
        <PositiveReviews
          :positive-reviews="positiveReviews"
          class="positive-reviews"
        />
      </div>

      <!-- 两列布局的 MetricsItem -->
      <div class="metrics-columns">
        <div class="metrics-column left-column">
          <MetricsItem
            v-for="(category, index) in leftCategories"
            :key="'left-' + index"
            :title="category.title"
            :metricsData="category.data"
          />
        </div>
        <div class="metrics-column right-column">
          <MetricsItem
            v-for="(category, index) in rightCategories"
            :key="'right-' + index"
            :title="category.title"
            :metricsData="category.data"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MetricsItem from "./components/MetricsItem.vue";
import RoomComfort from "./components/RoomComfort.vue";
import PositiveReviews from "./components/PositiveReviews.vue";

export default {
  components: { MetricsItem, RoomComfort, PositiveReviews },
  data() {
    return {
      localCategories: [], // 存储 prop 数据的内部状态
    };
  },
  props: {
    positiveReviews: {
      type: Array,
      required: true,
    },
    categories: { type: Array, required: true },
    title: { type: String, required: true }, // 新增 title prop
  },
  watch: {
    categories: {
      immediate: true,
      handler(newVal) {
        this.localCategories = newVal || []; // 确保为数组
      },
    },
  },
  computed: {
    leftCategories() {
      const half = Math.ceil(this.localCategories.length / 2); // 使用 localCategories
      return this.localCategories.slice(0, half);
    },
    rightCategories() {
      const half = Math.ceil(this.localCategories.length / 2); // 使用 localCategories
      return this.localCategories.slice(half);
    },
  },
};
</script>

<style scoped lang="scss">
.main-layout {
  width: 733px;
  background: #fff;
  padding: 15px 32px 24px;
  display: flex;
  flex-direction: column;

  .close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .content-container {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;

    .top-row {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      > * {
        flex: 1;
        min-width: 0;
      }
    }

    .metrics-columns {
      display: flex;
      gap: 16px;
      .metrics-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
      }
    }
  }
}
</style>
